import React, {useEffect} from 'react';

import * as echarts from 'echarts';

let myChart;
export default function index() {
  
  useEffect(()=>{
    myChart = echarts.init(document.getElementById('main'));
    init([]);
  },[]);

  useEffect(()=>{
    setTimeout(()=>{
      init([150, 230, 224, 218, 135, 147, 260]);
    },0)
  },[]);

  const init = (data) => {
    let option = {
        title: {
          text: '基础折线图'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        tooltip: {
          formatter(params){
           return params['seriesName'] +":" + params['value']; 
          }
        },
        legend: {
          data:['雨水量']
        },
        series: [{
            data: data,
            type: 'line',
            name: '雨水量'
        }]
    };

    option && myChart.setOption(option);
  };

  const divStyle = {
    width: 600,
    height: 400
  };

  return (
    <div id="main" style={divStyle}></div>
  )
}
